<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
require_once __DIR__ . '/../app/core/config.php';
require_once __DIR__ . '/../app/core/db.php';
require_once __DIR__ . '/../app/core/guards.php';

$guard = new PaywallGuard();
$user_email = $_SESSION['user_email'] ?? null;

if (!$user_email) {
    if (isset($_COOKIE['cr_visitor'])) {
        $visitor_email = $_COOKIE['cr_visitor'];
        $decoded = json_decode($visitor_email, true);
        $user_email = (is_array($decoded) && isset($decoded['email'])) ? $decoded['email'] : $visitor_email;
        $_SESSION['user_email'] = $user_email;
    }
}

$user_id = null;
if ($user_email) {
    try {
        $db = getDbConnection();
        $stmt = $db->prepare("SELECT id FROM leads WHERE email = ?");
        $stmt->execute([$user_email]);
        $user = $stmt->fetch(PDO::FETCH_ASSOC);
        if ($user) { $user_id = $user['id']; $_SESSION['user_id'] = $user_id; }
    } catch (Exception $e) { error_log("Error getting user_id: " . $e->getMessage()); }
}

$access     = $guard->checkAccess();
$is_premium = $access['plan'] === 'premium';
$allowed    = $access['allowed'];

if (!$allowed && PAYWALL_ENABLED) { header('Location: locked.php'); exit; }

$selectedCategory = $_GET['category'] ?? 'all';

try {
    $db = getDbConnection();
    if ($selectedCategory === 'all') {
        $stmt = $db->prepare("SELECT p.*, CASE WHEN usp.id IS NOT NULL THEN 1 ELSE 0 END as is_saved FROM projects p LEFT JOIN user_saved_projects usp ON p.id = usp.project_id AND usp.user_id = ? WHERE p.status = 'active' AND (p.archived = 0 OR p.archived IS NULL) ORDER BY p.id DESC");
        $stmt->execute([$user_id]);
    } else {
        $stmt = $db->prepare("SELECT p.*, CASE WHEN usp.id IS NOT NULL THEN 1 ELSE 0 END as is_saved FROM projects p LEFT JOIN user_saved_projects usp ON p.id = usp.project_id AND usp.user_id = ? WHERE p.status = 'active' AND (p.archived = 0 OR p.archived IS NULL) AND p.category = ? ORDER BY p.id DESC");
        $stmt->execute([$user_id, $selectedCategory]);
    }
    $all_projects = $stmt->fetchAll(PDO::FETCH_ASSOC);

    $categoryStmt = $db->query("SELECT category, COUNT(*) as count FROM projects WHERE status = 'active' AND (archived = 0 OR archived IS NULL) GROUP BY category ORDER BY count DESC");
    $categories   = $categoryStmt->fetchAll(PDO::FETCH_ASSOC);

    $categoryIcons = [
        'Web Development'=>'💻','Mobile Development'=>'📱','Design'=>'🎨',
        'Writing'=>'✍️','Marketing'=>'📣','Data Science'=>'📊',
        'Programming & Development'=>'💻','Design & Art'=>'🎨',
        'Writing & Translation'=>'✍️','Sales & Marketing'=>'📣',
        'Administrative & Secretarial'=>'📋','Engineering & Architecture'=>'🏗️',
        'Business & Finance'=>'💼','Education & Training'=>'📚',
        'Legal'=>'⚖️','Other'=>'📦'
    ];
} catch (Exception $e) {
    $all_projects = [];
    $error_message = "Error loading projects: " . $e->getMessage();
}

$projects          = (!$is_premium && PAYWALL_ENABLED) ? array_slice($all_projects, 0, FREE_DAILY_LIMIT) : $all_projects;
$total_projects    = count($all_projects);
$showing_projects  = count($projects);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XJ1XQE81F5"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-XJ1XQE81F5');</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Browse Fresh Freelance Projects | ClientRadar Job Board</title>
<meta name="description" content="Access 300+ daily updated freelance projects from RemoteOK, Freelancer.com & more.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://digvera.com/clientradar/ui/projects_table.php">
<meta name="theme-color" content="#FF5C2B">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../assets/inner_theme.css">
<style>
/* ── TRANSLATOR + THEME ── */
.theme-toggle{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.7);border-radius:9px;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;}
.theme-toggle:hover{background:rgba(255,255,255,0.15);color:#fff;transform:scale(1.08);}
body.light-mode .theme-toggle{background:rgba(0,0,0,0.06);border-color:rgba(0,0,0,0.12);color:#555;}
.tr-btn{background:rgba(255,92,43,0.15);border:1px solid rgba(255,92,43,0.35);color:#FF5C2B;border-radius:9px;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;flex-shrink:0;}
.tr-btn:hover{background:rgba(255,92,43,0.28);transform:scale(1.08);}
.tr-panel{position:fixed;top:72px;right:16px;z-index:9998;width:190px;background:#0E0E18;border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:10px 8px;opacity:0;pointer-events:none;transform:translateY(-6px) scale(0.97);transform-origin:top right;transition:opacity .2s,transform .2s;box-shadow:0 12px 40px rgba(0,0,0,0.7);}
.tr-panel.open{opacity:1;pointer-events:all;transform:translateY(0) scale(1);}
.tr-panel-title{font-family:'Syne',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#6E6D6A;margin-bottom:8px;padding:4px 8px 8px;border-bottom:1px solid rgba(255,255,255,0.07);}
.tr-langs{display:flex;flex-direction:column;gap:2px;}
.tr-lang-btn{width:100%;padding:7px 10px;background:transparent;border:1px solid transparent;border-radius:7px;color:#A8A7A3;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;cursor:pointer;text-align:left;transition:all .15s;display:flex;align-items:center;justify-content:space-between;}
.tr-lang-btn:hover{background:rgba(255,255,255,0.05);color:#F4F3EF;}
.tr-lang-btn.active{background:rgba(255,92,43,0.1);border-color:rgba(255,92,43,0.25);color:#FF5C2B;}
.tr-lang-btn .tr-check{width:14px;height:14px;border-radius:50%;background:#FF5C2B;display:none;align-items:center;justify-content:center;font-size:8px;color:#05050A;flex-shrink:0;}
.tr-lang-btn.active .tr-check{display:flex;}
.tr-loading{position:fixed;inset:0;z-index:9997;background:rgba(5,5,10,0.75);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;}
.tr-loading.show{display:flex;}
.tr-spinner{width:36px;height:36px;border:3px solid rgba(255,92,43,0.2);border-top-color:#FF5C2B;border-radius:50%;animation:trSpin .8s linear infinite;}
@keyframes trSpin{to{transform:rotate(360deg);}}
.tr-loading-text{font-family:'Syne',sans-serif;font-size:13px;font-weight:600;color:#A8A7A3;}
.tr-progress{font-family:'DM Sans',sans-serif;font-size:12px;color:#6E6D6A;}
body.rtl{direction:rtl;text-align:right;}
body.rtl .tr-panel{right:auto;left:16px;transform-origin:top left;}

/* ── NAV TOOLBAR ── */
.nav-toolbar{display:flex;align-items:center;gap:8px;}

/* ── LAYOUT ── */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f8f9fa;min-height:100vh;}
.header{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);color:white;padding:20px 24px;box-shadow:0 2px 20px rgba(0,0,0,0.3);}
.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.header-brand h1{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;letter-spacing:-0.5px;}
.header-brand h1 a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px;}
.header-brand p{font-size:13px;color:rgba(255,255,255,0.55);margin-top:2px;}
.logo-pip{width:8px;height:8px;background:#FF5C2B;border-radius:50%;animation:pip 2s ease-in-out infinite;box-shadow:0 0 8px #FF5C2B;flex-shrink:0;}
@keyframes pip{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.6);opacity:.7;}}
.header-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.plan-badge{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);padding:6px 14px;border-radius:100px;font-size:12px;font-weight:700;letter-spacing:.5px;}
.plan-badge.premium{background:rgba(255,209,102,0.15);border-color:rgba(255,209,102,0.35);color:#FFD166;}
.upgrade-btn{background:#FF5C2B;color:#fff;padding:8px 18px;border-radius:100px;text-decoration:none;font-size:13px;font-weight:700;transition:all .2s;}
.upgrade-btn:hover{background:#ff7043;transform:translateY(-2px);}
.saved-projects-link{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);padding:7px 14px;border-radius:100px;text-decoration:none;color:rgba(255,255,255,0.8);font-size:13px;font-weight:500;transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
.saved-projects-link:hover{background:rgba(255,255,255,0.15);color:#fff;}
.logout-link{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid rgba(239,68,68,0.3);border-radius:100px;font-size:12px;font-weight:500;color:#FCA5A5;text-decoration:none;transition:all .2s;}
.logout-link:hover{background:rgba(239,68,68,0.08);}

/* ── STATS BAR ── */
.stats-bar{background:white;padding:16px 24px;box-shadow:0 2px 5px rgba(0,0,0,0.05);border-bottom:1px solid #e5e7eb;}
.stats-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.stat-item{display:flex;align-items:center;gap:10px;}
.stat-icon{font-size:22px;}
.stat-text{font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.5px;}
.stat-value{font-family:'Syne',sans-serif;font-size:20px;font-weight:700;color:#1e293b;line-height:1;}
.views-remaining{background:#fef3c7;padding:8px 16px;border-radius:8px;border-left:4px solid #f59e0b;font-size:13px;}
.views-remaining strong{color:#92400e;}
body.light-mode .stats-bar{background:#fff;}
body.light-mode .stat-value{color:#1e293b;}

/* ── TABS ── */
.archive-tabs{max-width:1200px;margin:20px auto;padding:0 20px;}
.tabs-container{display:flex;gap:10px;background:white;padding:12px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06);flex-wrap:wrap;}
.tab-link{padding:10px 22px;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px;transition:all .2s;}
.tab-link.active{background:linear-gradient(135deg,#1a1a2e,#0f3460);color:white;}
.tab-link:not(.active){background:#f1f5f9;color:#475569;}
.tab-link:not(.active):hover{background:#e2e8f0;}
.tab-link.radar{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:white;}

/* ── FILTER ── */
.filter-section{background:white;padding:20px 24px;border-radius:12px;margin:16px auto;max-width:1200px;box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.filter-title{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;margin-bottom:12px;color:#1e293b;letter-spacing:.3px;}
.filter-buttons{display:flex;flex-wrap:wrap;gap:8px;}
.filter-btn{padding:8px 16px;border:2px solid #e2e8f0;background:white;border-radius:100px;cursor:pointer;transition:all .2s;font-size:13px;font-weight:500;color:#475569;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.filter-btn:hover{border-color:#FF5C2B;background:#fff5f2;}
.filter-btn.active{border-color:#FF5C2B;background:#FF5C2B;color:white;}
.filter-count{background:rgba(0,0,0,0.08);padding:1px 7px;border-radius:100px;font-size:11px;font-weight:700;}
.filter-btn.active .filter-count{background:rgba(255,255,255,0.25);}

/* ── CONTAINER ── */
.container{max-width:1200px;margin:20px auto;padding:0 20px;}
.alert{padding:14px 18px;border-radius:10px;margin-bottom:16px;font-size:14px;}
.alert-warning{background:#fef3c7;border-left:4px solid #f59e0b;color:#92400e;}
.alert-info{background:#fff5f2;border-left:4px solid #FF5C2B;color:#7c2d12;}

/* ── PROJECT CARDS ── */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;}
.project-card{background:white;border-radius:14px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,0.06);transition:all .25s;border:2px solid transparent;position:relative;}
.project-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.1);transform:translateY(-3px);border-color:rgba(255,92,43,0.25);}
.project-title{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:#1e293b;margin-bottom:10px;line-height:1.4;}
.project-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.meta-badge{padding:3px 10px;border-radius:100px;font-size:11px;font-weight:600;}
.badge-source{background:#dbeafe;color:#1e40af;}
.badge-date{background:#f1f5f9;color:#64748b;}
.badge-category{background:#f0fdf4;color:#166534;}
.project-description{color:#475569;line-height:1.6;margin-bottom:14px;font-size:14px;}
.project-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.save-btn,.project-link,.ai-btn{flex:0 0 auto;white-space:nowrap;height:40px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;}
.save-btn{border:2px solid #e0e0e0;background:white;color:#666;gap:6px;}
.save-btn:hover{border-color:#3b82f6;color:#3b82f6;}
.save-btn.saved{background:#eff6ff;border-color:#3b82f6;color:#1d4ed8;}
.save-btn:disabled{opacity:.5;cursor:not-allowed;}
.project-link{background:linear-gradient(135deg,#1a1a2e,#0f3460);color:white;text-decoration:none;border:none;}
.project-link:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(15,52,96,0.4);}
.ai-btn{background:linear-gradient(135deg,#FF5C2B,#ff7043);color:white;border:none;gap:6px;}
.ai-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,92,43,0.4);}

/* ── MODAL ── */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1000;align-items:center;justify-content:center;padding:20px;}
.modal.active{display:flex;}
.modal-content{background:white;border-radius:16px;padding:28px;max-width:680px;width:100%;max-height:90vh;overflow-y:auto;}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid #e5e7eb;}
.modal-header h2{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;}
.modal-close{background:none;border:none;font-size:26px;cursor:pointer;color:#64748b;line-height:1;}
.loading{text-align:center;padding:40px;}
.spinner{border:4px solid #f3f4f6;border-top:4px solid #FF5C2B;border-radius:50%;width:48px;height:48px;animation:spin 1s linear infinite;margin:0 auto 16px;}
@keyframes spin{to{transform:rotate(360deg);}}
.proposal-text{background:#f8f9fa;border:2px solid #e5e7eb;border-radius:12px;padding:18px;font-size:14px;line-height:1.8;color:#1e293b;white-space:pre-wrap;margin-bottom:16px;}
.copy-btn{background:#FF5C2B;color:white;padding:10px 22px;border-radius:8px;border:none;font-weight:600;cursor:pointer;transition:all .2s;}
.copy-btn:hover{background:#ff7043;}
.copy-btn.copied{background:#10b981;}
.regenerate-btn{background:#f59e0b;color:white;padding:10px 22px;border-radius:8px;border:none;font-weight:600;cursor:pointer;transition:all .2s;}
.regenerate-btn:hover{background:#d97706;}
.error-message{background:#fef2f2;border:2px solid #fecaca;border-radius:8px;padding:14px;color:#991b1b;margin-bottom:14px;font-size:14px;}

/* ── LOCKED ── */
.locked-projects{position:relative;margin-top:40px;}
.locked-overlay{position:relative;filter:blur(5px);pointer-events:none;opacity:.5;}
.unlock-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:36px;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.25);text-align:center;z-index:10;max-width:480px;width:90%;}
.unlock-icon{font-size:52px;margin-bottom:16px;}
.unlock-banner h3{color:#1e293b;margin-bottom:8px;font-family:'Syne',sans-serif;font-size:1.3em;font-weight:700;}
.unlock-banner p{color:#64748b;margin-bottom:22px;line-height:1.6;font-size:14px;}
.unlock-btn{display:inline-block;background:#FF5C2B;color:white;padding:14px 36px;border-radius:100px;text-decoration:none;font-weight:700;font-size:15px;transition:all .2s;}
.unlock-btn:hover{background:#ff7043;transform:translateY(-2px);}

/* ── EMPTY ── */
.empty-state{text-align:center;padding:60px 20px;color:#64748b;}
.empty-icon{font-size:72px;margin-bottom:16px;}

/* ── DARK MODE overrides ── */
body.light-mode .project-card{background:#fff;}
body.light-mode .filter-section,body.light-mode .tabs-container{background:#fff;}

/* ── MOBILE ── */
@media(max-width:768px){
  .projects-grid{grid-template-columns:1fr;}
  .header-info{width:100%;}
  .project-actions{flex-direction:column;}
  .save-btn,.project-link,.ai-btn{width:100%;justify-content:center;}
  .nav-toolbar{gap:6px;}
}
</style>
</head>
<body>
<script>
(function(){
  if(localStorage.getItem('cr_theme')==='light')
    document.body.classList.add('light-mode');
})();
function toggleTheme(){
  const isLight=document.body.classList.toggle('light-mode');
  localStorage.setItem('cr_theme',isLight?'light':'dark');
  const moon=document.querySelector('#themeToggle .icon-moon');
  const sun=document.querySelector('#themeToggle .icon-sun');
  if(moon)moon.style.display=isLight?'none':'';
  if(sun)sun.style.display=isLight?'':'none';
}
(function(){
  if(localStorage.getItem('cr_theme')==='light'){
    document.addEventListener('DOMContentLoaded',function(){
      const moon=document.querySelector('#themeToggle .icon-moon');
      const sun=document.querySelector('#themeToggle .icon-sun');
      if(moon)moon.style.display='none';
      if(sun)sun.style.display='';
    });
  }
})();
</script>

<!-- Header -->
<div class="header">
  <div class="header-content">
    <div class="header-brand">
      <h1><a href="projects_table.php"><div class="logo-pip"></div>ClientRadar</a></h1>
      <p>Discover your next project opportunity</p>
    </div>
    <div class="header-info">
      <?php if ($user_email): ?>
        <span style="font-size:13px;color:rgba(255,255,255,0.6);">👤 <?= htmlspecialchars($user_email) ?></span>
      <?php endif; ?>
      <?php if ($user_id): ?>
        <a href="../my-projects.php" class="saved-projects-link"><i class="fas fa-bookmark"></i> Saved</a>
      <?php endif; ?>
      <span class="plan-badge <?= $is_premium ? 'premium' : '' ?>">
        <?= $is_premium ? '⭐ PREMIUM' : '🆓 FREE' ?>
      </span>
      <?php if (!$is_premium): ?>
        <a href="locked.php" class="upgrade-btn">Upgrade →</a>
      <?php endif; ?>
      <!-- Theme + Translate -->
      <div class="nav-toolbar">
        <button class="theme-toggle" id="themeToggle" onclick="toggleTheme()" title="Toggle theme">
          <svg class="icon-moon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
          <svg class="icon-sun" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
        </button>
        <button class="tr-btn" id="trBtn" onclick="toggleTrPanel()" title="Translate">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/>
            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
          </svg>
        </button>
      </div>
      <a href="../logout.php" class="logout-link">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
        Logout
      </a>
    </div>
  </div>
</div>

<!-- Stats Bar -->
<div class="stats-bar">
  <div class="stats-content">
    <div class="stat-item">
      <span class="stat-icon">📊</span>
      <div><div class="stat-text">Total Projects</div><div class="stat-value"><?= $total_projects ?></div></div>
    </div>
    <div class="stat-item">
      <span class="stat-icon">👀</span>
      <div><div class="stat-text">Showing</div><div class="stat-value"><?= $showing_projects ?></div></div>
    </div>
    <?php if (!$is_premium && PAYWALL_ENABLED): ?>
    <div class="views-remaining">
      <strong>⚠️ Free Plan:</strong> Viewing <?= $showing_projects ?> of <?= $total_projects ?> projects
    </div>
    <?php endif; ?>
  </div>
</div>

<!-- Tabs -->
<div class="archive-tabs">
  <div class="tabs-container">
    <a href="projects_table.php" class="tab-link active">🎯 Fresh Projects</a>
    <a href="archived_projects.php" class="tab-link">📦 Archived Projects</a>
    <a href="radar_search.php" class="tab-link radar">🔍 Radar Search</a>
  </div>
</div>

<!-- Filter -->
<div class="filter-section">
  <div class="filter-title">📂 Filter by Category</div>
  <div class="filter-buttons">
    <a href="?category=all" class="filter-btn <?= $selectedCategory==='all'?'active':'' ?>">
      All Projects <span class="filter-count"><?= $total_projects ?></span>
    </a>
    <?php foreach ($categories as $cat): $icon=$categoryIcons[$cat['category']]??'📦'; ?>
    <a href="?category=<?= urlencode($cat['category']) ?>" class="filter-btn <?= $selectedCategory===$cat['category']?'active':'' ?>">
      <?= $icon ?> <?= htmlspecialchars($cat['category']) ?> <span class="filter-count"><?= $cat['count'] ?></span>
    </a>
    <?php endforeach; ?>
  </div>
</div>

<!-- Main Content -->
<div class="container">
  <?php if (isset($error_message)): ?>
  <div class="alert alert-warning"><?= htmlspecialchars($error_message) ?></div>
  <?php endif; ?>

  <?php if (!$is_premium && PAYWALL_ENABLED && $showing_projects < $total_projects): ?>
  <div class="alert alert-info">
    <strong>💡 Upgrade to Premium</strong> to see all <?= $total_projects ?> projects + unlimited daily access!
  </div>
  <?php endif; ?>

  <?php if (empty($projects)): ?>
  <div class="empty-state">
    <div class="empty-icon">📭</div>
    <h3>No projects available yet</h3>
    <p>Check back soon for new opportunities!</p>
  </div>
  <?php else: ?>
  <div class="projects-grid">
    <?php foreach ($projects as $project): ?>
    <div class="project-card">
      <h3 class="project-title"><?= htmlspecialchars($project['title']) ?></h3>
      <div class="project-meta">
        <span class="meta-badge badge-source"><?= htmlspecialchars($project['source']) ?></span>
        <?php if (!empty($project['category'])): ?>
        <span class="meta-badge badge-category"><?= ($categoryIcons[$project['category']]??'📦').' '.htmlspecialchars($project['category']) ?></span>
        <?php endif; ?>
        <span class="meta-badge badge-date"><?= date('M d, Y', strtotime($project['created_at'])) ?></span>
      </div>
      <div class="project-description">
        <?= nl2br(htmlspecialchars(substr($project['description'],0,200))) ?><?= strlen($project['description'])>200?'...':'' ?>
      </div>
      <div class="project-actions">
        <?php if ($user_id): ?>
        <button type="button" class="save-btn <?= $project['is_saved']?'saved':'' ?>"
                data-project-id="<?= $project['id'] ?>" data-saved="<?= $project['is_saved'] ?>">
          <i class="<?= $project['is_saved']?'fas':'far' ?> fa-bookmark"></i>
          <?= $project['is_saved']?'Saved':'Save' ?>
        </button>
        <?php endif; ?>
        <a href="<?= htmlspecialchars($project['project_url']) ?>" target="_blank" class="project-link">View Project →</a>
        <button type="button" class="ai-btn"
                onclick="generateProposal(<?= $project['id'] ?>,'<?= addslashes(htmlspecialchars($project['title'])) ?>')">
          ✨ AI Proposal
        </button>
      </div>
    </div>
    <?php endforeach; ?>
  </div>
  <?php endif; ?>

  <!-- Locked -->
  <?php if (!$is_premium && PAYWALL_ENABLED && $showing_projects < $total_projects): ?>
  <div class="locked-projects">
    <div class="locked-overlay">
      <div class="projects-grid">
        <?php foreach (array_slice($all_projects, FREE_DAILY_LIMIT, 3) as $project): ?>
        <div class="project-card">
          <h3 class="project-title"><?= htmlspecialchars($project['title']) ?></h3>
          <div class="project-meta"><span class="meta-badge badge-source"><?= htmlspecialchars($project['source']) ?></span></div>
          <div class="project-description"><?= nl2br(htmlspecialchars(substr($project['description'],0,150))) ?>...</div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
    <div class="unlock-banner">
      <div class="unlock-icon">🔒</div>
      <h3>Unlock <?= $total_projects-$showing_projects ?> More Projects</h3>
      <p>Upgrade to Premium for unlimited access to all projects and AI proposals.</p>
      <a href="locked.php" class="unlock-btn">Upgrade Now →</a>
    </div>
  </div>
  <?php endif; ?>
</div>

<!-- Proposal Modal -->
<div id="proposalModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h2>✨ AI Generated Proposal</h2>
      <button class="modal-close" onclick="closeModal()">×</button>
    </div>
    <div id="modalBody"></div>
  </div>
</div>

<!-- Translator Panel -->
<?php $tr_page='projects_table'; include __DIR__ . '/../translator_ui.php'; ?>

<script>
// Save/Unsave
<?php if ($user_id): ?>
document.querySelectorAll('.save-btn').forEach(btn=>{
  btn.addEventListener('click',function(){
    const projectId=this.dataset.projectId;
    const isSaved=this.dataset.saved==='1';
    const button=this;
    button.disabled=true;
    fetch(isSaved?'../app/api/unsave_project.php':'../app/api/save_project.php',{
      method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},
      body:'project_id='+projectId
    }).then(r=>r.json()).then(data=>{
      if(data.success){
        if(isSaved){
          button.dataset.saved='0';button.classList.remove('saved');
          button.innerHTML='<i class="far fa-bookmark"></i> Save';
        } else {
          button.dataset.saved='1';button.classList.add('saved');
          button.innerHTML='<i class="fas fa-bookmark"></i> Saved';
        }
      } else { alert(data.message||'Error'); }
    }).catch(()=>alert('Failed')).finally(()=>{button.disabled=false;});
  });
});
<?php endif; ?>

function generateProposal(projectId,projectTitle,regenerate=false){
  const modal=document.getElementById('proposalModal');
  const modalBody=document.getElementById('modalBody');
  modal.classList.add('active');
  modalBody.innerHTML='<div class="loading"><div class="spinner"></div><p>AI is crafting your proposal...</p></div>';
  fetch('../ai/generate_test.php?project_id='+projectId+(regenerate?'&regenerate=1':''))
    .then(r=>r.json()).then(data=>{
      if(data.success){
        modalBody.innerHTML=`<h3 style="margin-bottom:14px;font-family:'Syne',sans-serif;">For: ${escapeHtml(projectTitle)}</h3>
          <div class="proposal-text">${escapeHtml(data.proposal)}</div>
          <div style="display:flex;gap:10px;">
            <button class="copy-btn" onclick="copyProposal(this)">📋 Copy</button>
            <button class="regenerate-btn" onclick="generateProposal(${projectId},'${escapeHtml(projectTitle).replace(/'/g,"\\'")}',true)">🔄 Regenerate</button>
          </div>`;
      } else {
        modalBody.innerHTML=`<div class="error-message"><strong>Error:</strong> ${escapeHtml(data.error)}</div>
          <button class="copy-btn" onclick="closeModal()">Close</button>`;
      }
    }).catch(()=>{
      modalBody.innerHTML='<div class="error-message">Failed to generate proposal.</div><button class="copy-btn" onclick="closeModal()">Close</button>';
    });
}
function closeModal(){ document.getElementById('proposalModal').classList.remove('active'); }
function copyProposal(button){
  navigator.clipboard.writeText(document.querySelector('.proposal-text').textContent).then(()=>{
    button.textContent='✓ Copied!';button.classList.add('copied');
    setTimeout(()=>{button.textContent='📋 Copy';button.classList.remove('copied');},2000);
  });
}
function escapeHtml(text){ const d=document.createElement('div');d.textContent=text;return d.innerHTML; }
document.getElementById('proposalModal').addEventListener('click',function(e){ if(e.target===this)closeModal(); });
</script>
</body>
</html>